<template>
	<view class="hwq-content">
		<navBar title="选择人员"></navBar>
		<div class="search-box">
            <searchCom class="search-input" v-model="searchText" @enter="fnSearch" :placeholder="'请输入姓名'" style="width: 80%; flex: none; margin-right: 20rpx; display: flex; align-items: center;"></searchCom>
            <u-button type="primary" @click="checkAll">全选</u-button>
        </div>
		<scroll-view scroll-y="true" class="hwq-scroll-box hwq-is-search">
			<template v-for="item1 in data">
				<view class="list-item">
                    <view class="info-box">
                        <u-icon size="30" name="account-fill" color="#2f80ed"></u-icon>
                        <text class="name">{{ item1.name }}</text>
                        <text class="phone">{{ item1.phone }}</text>
                    </view>
                    <u-checkbox-group v-model="item1.checked"  @change="(val) => { checkboxChange(val, item1) }" >
                        <u-checkbox 
                            :name="item1.id"
                        ></u-checkbox>
                    </u-checkbox-group>
                </view>
			</template>
		</scroll-view>
        <view class="footer-button">
			<view class="button-group">
				<button class="button-primary" @click="immediatelyCall">立即呼叫</button>
			</view>
		</view>
	</view>
</template>

<script>
	import searchCom from "@/components/searchCom.vue"
	import mixins from '@/utils/mixins.js'
	import myStroage from '@/utils/sessionStorage'
    import { getVoiceCallPeople, callPeople } from '@/api/emergency/emergencyDispatch.js'

	export default {
		mixins: [mixins],
		data() {
			return {
				data: [],
				copyData:[],
				searchText: undefined,
				activeItem: "",
				selectedList:[],
                checkPeopleMap: {},
                eventObj: {},
                loading: false
			}
		},
        onLoad(params) {
            this.eventObj.id = params && params.eventId
            this.eventObj.projectCascade = params && params.projectCascade
            this.eventObj.startTime = params && params.startTime
            this.getVoiceCallPeople()
        },
		components: {
			searchCom
		},
		methods: {
			fnSearch(val) {
                console.log(val)
                this.data = []
                this.getVoiceCallPeople(val)
            },
            getVoiceCallPeople(val) {
                return new Promise((resolve, reject) => {
                    getVoiceCallPeople({
                        currPage: 1,
                        pageSize: 99999,
                        params: {
                            name: val
                        }
                    }).then(res => {
                        console.log(res)
                        if (res.success) {
                            this.data = res.result.list.map(item => ({ ...item, checked: this.checkPeopleMap[item.id] ? [item.id] : [] }))
                            resolve(res)
                        }
                    })
                })
            },
            checkboxChange(val, item) {
                console.log(val)
                if (val.length > 0) {
                    if (!this.checkPeopleMap[item.id]) {
                        this.checkPeopleMap[item.id] = item
                    }
                } else {
                    if (this.checkPeopleMap[item.id]) {
                        delete this.checkPeopleMap[item.id]
                    }
                }
                
            },
            checkAll() {
                this.data.forEach(item => {
                    this.$set(item, 'checked', [item.id])
                    this.checkboxChange([item.id], item)
                })
                console.log(this)
            },
            immediatelyCall() {
                if (Object.keys(this.checkPeopleMap).length == 0) {
                    this.$message('请选择人员')
                    return
                }
                if (this.loading) return
                this.loading = true
                const userList = []
                for (const item in this.checkPeopleMap) {
                    userList.push(this.checkPeopleMap[item].phone)
                }
                callPeople({
                    eventId: this.eventObj.id,
                    projectCascade: this.eventObj.projectCascade,
                    userList: userList.join(','),
                    startTime: this.eventObj.startTime
                }).then(res => {
                    if(res.success) {
                        this.$message('呼叫成功！')
                        setTimeout(() => {
                            uni.navigateBack({})
                        },500)
                    }
                }).finally(() => {
                    this.loading = false
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.hwq-content {
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */

        .search-box {
            display: flex;
            // align-items: center;
        }
        .list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e2e2e2;
            .name{
                margin-right: 40rpx;
                margin-left: 40rpx;
            }
            .info-box{
                display: flex;
                align-items: center;
                font-size: 36rpx;
			    font-family: PingFang SC-Medium, PingFang SC;
			    color: #445469;
			    line-height: 120rpx;
            }
        }
	}
	.item-box {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 30rpx;
		border-top: 1px solid #E2E5ED;

		&:first-child {
			border-top-width: 0;
		}

		.name {
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #445469;
			line-height: 120rpx;
			border-bottom: 1px solid #E2E5ED;
		}
	}

	.item-box-area {
		padding-left: 30rpx;
	}

	.item-box-point {
		padding-left: 60rpx;
	}
    ::v-deep .footer-button {
        .button-group{
            left: 0;
        }
    }
</style>
